<template>
  <div class="top">
    <div><img src="@/assets/images/logo.png" alt="" class="img" /></div>
    <div class="nav">
      <span :class="fullpath == '/' ? 'active' : ''" @click="navigate('/')">首页</span>
      <span :class="fullpath == '/etc' ? 'active' : ''" @click="navigate('/etc')">ETC</span>
      <span :class="fullpath == '/streaming' ? 'active' : ''" @click="navigate('/streaming')">流媒体后视镜</span>
    </div>
  </div>
  <div class="container">
    <div class="banner">
      <div class="title">ETC</div>
      <div class="text">物理按键 | 全国畅行95折</div>
    </div>
    <div class="time">
      <div class="time_bg">
        <div class="jc">
          <div class="time_item">
            <div class="timename">
              5年
              <img src="@/assets/images/add.png" alt="" />
            </div>
            <div class="text">深耕ETC服务领域</div>
            <div class="yw">Deeply cultivate the ETC service field</div>
          </div>
          <div class="time_item">
            <div class="timename">
              1w
              <img src="@/assets/images/add.png" alt="" />
            </div>
            <div class="text">平台月均订单量</div>
            <div class="yw">Monthly average order quantity</div>
          </div>
        </div>
        <div class="jc">
          <div class="time_item">
            <div class="timename">
              50w
              <img src="@/assets/images/add.png" alt="" />
            </div>
            <div class="text">服务全国ETC用户数</div>
            <div class="yw">Number of ETC users</div>
          </div>
          <div class="time_item">
            <div class="timename">
              100w
              <img src="@/assets/images/add.png" alt="" />
            </div>
            <div class="text">平台每月访问量</div>
            <div class="yw">Monthly visits</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bannerbottom">
      <div class="item">
        <div class="img"><img src="@/assets/images/quality.png" alt="" /></div>
        <div class="title">质量优势</div>
        <div class="text">
          原厂ETC对车系有更好的适配性，产品质量过硬。配备了更好的信号源，通行效率更高。
        </div>
      </div>
      <div class="item">
        <div class="img"><img src="@/assets/images/discount.png" alt="" /></div>
        <div class="title">折扣优势</div>
        <div class="text">可通行全国高速ETC车通，通行费均可享受95折优惠。</div>
      </div>
      <div class="item">
        <div class="img"><img src="@/assets/images/serve.png" alt="" /></div>
        <div class="title">服务优势</div>
        <div class="text">配备了一对一专属客服进行线上激活指引，售后无优</div>
      </div>
    </div>
    <div class="record">
      <div class="adress">
        <div style="padding: 20px 0;">
          <span class="tltle">办公地点</span><span class="copy">广州市白云区元下底路1号17栋101房</span>
        </div>
        <div class="img">
          <div><img src="http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/qrcore.jpg" alt="" /></div>
          <div style="text-align: center;">微信公众号</div>
        </div>
        <div class="center">
          Copyright © 2024 广州车易行科技发展有限公司 <span @click="goToBeianSite">粤ICP备20024691号-14</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
// import router from "@/router";
import { useRouter } from "vue-router";
const router = useRouter();
const fullpath = ref("");
const updateScrollHeight = () => {
  const time_item = document.querySelectorAll(".time_item");
  const bannerbottom = document.querySelectorAll(".item");
  const options = {
    threshold: 0.1,
  };
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("animate");
        observer.unobserve(entry.target);
      }
    });
  }, options);
  const observers = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add("animatex");
        observer.unobserve(entry.target);
      }
    });
  }, options);
  time_item.forEach((item) => {
    observer.observe(item);
  });
  bannerbottom.forEach((item) => {
    observers.observe(item);
  });
  window.addEventListener("scroll", updateScrollHeight);
};
onMounted(() => {
  updateScrollHeight();
  // 在组件挂载后获取当前路由的完整路径
  fullpath.value = router.currentRoute.value.fullPath;
  console.log(fullpath.value === "/etc");
  console.log("router", router.currentRoute.value.fullPath);
});
onUnmounted(() => {
  window.removeEventListener("scroll", updateScrollHeight);
});
const navigate = (p) => {
  router.push(p);
  window.scrollTo(0, 0);
};
const goToBeianSite = () => {
  window.open('https://beian.miit.gov.cn/', '_blank');
}
</script>


<style lang="scss" scoped>
.container {
  height: auto;
  width: 100%;
  background-color: #d4e1f4;
}

.top {
  height: 132px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  width: 100vw;
  background-color: #fff;
  z-index: 999;

  .img {
    height: 62px;
  }

  .nav {
    display: flex;

    span {
      margin-left: 90px;
      font-size: 32px;
      color: #000;
    }

    .active {
      color: #126ef9;
      padding-bottom: 10px;
      position: relative;
    }

    .active::after {
      content: "";
      position: absolute;
      bottom: -10px;
      width: 40px;
      height: 6px;
      background-color: #126ef9;
      left: 50%;
      transform: translateX(-50%);
    }
  }
}

.banner {
  background: url(http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/banner.png) no-repeat;
  padding-top: 132px;
  box-sizing: border-box;
  background-size: cover;
  height: 884px;
  display: flex;
  flex-direction: column;
  padding-left: 171px;
  justify-content: center;

  .title {
    font-size: 114px;
    font-weight: bold;
    color: #eaeded;
    padding-bottom: 47px;
  }

  .text {
    font-size: 46px;
    color: #eaeded;
    font-weight: bold;
  }

  img {
    width: 100%;
  }
}

.time {
  width: 100%;
  height: 1380px;
  background-color: #d4e1f4;
  padding: 0 156px;
  box-sizing: border-box;

  .time_bg {
    background: url(@/assets/images/etc_bg1.png) no-repeat;
    background-size: cover;
    height: 1100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-top: 112px;

    .jc {
      display: flex;
      justify-content: space-between;
    }

    .time_item {
      width: 598px;
      height: 349px;
      background-color: #eaeded;
      padding: 40px;
      box-sizing: border-box;

      .timename {
        display: flex;
        color: #126ef9;
        font-weight: bold;
        font-size: 90px;
        margin-bottom: 28px;

        img {
          width: 32px;
          height: 32px;
        }
      }

      .text {
        font-size: 50px;
        font-weight: bold;
        color: #333;
        margin-bottom: 18px;
      }

      .yw {
        font-size: 26px;
        color: #999999;
      }
    }
  }
}

.bannerbottom {
  background: url(http://yxyt.oss-cn-hangzhou.aliyuncs.com/ghac/etc_bg.png) no-repeat;
  background-size: cover;
  height: 1073px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 90px;
  box-sizing: border-box;

  .item {
    width: 540px;
    height: 671px;
    background-color: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 60px 40px;
    box-sizing: border-box;

    .img {
      img {
        width: 234px;
        height: 248px;
      }
    }

    .title {
      font-size: 50px;
      font-weight: bold;
      color: #126ef9;
      border-bottom: 1px dashed #126ef9;
      padding-bottom: 10px;
    }

    .text {
      font-size: 34px;
      line-height: 57px;
      width: 446px;
      margin-top: 20px;
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(200px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate {
  animation: fadeIn 1s ease - in - out;
}

@keyframes fadeInx {
  from {
    opacity: 0;
    transform: translateX(200px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animatex {
  animation: fadeInx 1s ease - in - out;
}

.record {
  .adress {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .tltle {
      color: #000000;
      font-size: 16px;
      margin-right: 20px;
    }

    .copy {
      color: #999;
      font-size: 16px;
    }
  }

  .img {
    img {
      width: 200px;
      height: 200px;
    }
  }

  .center {
    font-size: 16px;
    padding: 50px 0;
  }
}
</style>
